<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="850px"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      validate-on-rule-change
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="闸机名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="部门名称"></el-input>
          </el-form-item>
          <el-form-item label="闸机编号" prop="deviceNo">
            <el-input v-model="dataForm.deviceNo" placeholder="角色名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备ip端口号" prop="deviceIp">
            <el-input placeholder="设备ip端口号" v-model="dataForm.deviceIp" clearable></el-input>
          </el-form-item>

          <el-form-item label="类型">
            <el-select v-model="dataForm.type" placeholder="请选择">
              <el-option label="车辆闸机" value="0"></el-option>
              <el-option label="人脸识别" value="1"></el-option>
              <el-option label="刷卡机" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="dataForm.type=='0'">
        提供周日到周一共7组，每组最高可设置7个时间段
        <div style="display:flex;text-align:center" v-for="(item,index) in timeArry" :key="index">
          <div style="flex:1">
            周日
            <el-time-picker
              v-model="item.startTimes[0]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
            <el-time-picker
              v-model="item.endTime[0]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
          </div>
          <div style="flex:1">
            周一
            <el-time-picker
              v-model="item.startTimes[1]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
            <el-time-picker
              v-model="item.endTime[1]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
          </div>
          <div style="flex:1">
            周二
            <el-time-picker
              v-model="item.startTimes[2]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
            <el-time-picker
              v-model="item.endTime[2]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
          </div>
          <div style="flex:1">
            周三
            <el-time-picker
              v-model="item.startTimes[3]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
            <el-time-picker
              v-model="item.endTime[3]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
          </div>
          <div style="flex:1">
            周四
            <el-time-picker
              v-model="item.startTimes[4]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
            <el-time-picker
              v-model="item.endTime[4]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
          </div>
          <div style="flex:1">
            周五
            <el-time-picker
              v-model="item.startTimes[5]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
            <el-time-picker
              v-model="item.endTime[5]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
          </div>
          <div style="flex:1">
            周六
            <el-time-picker
              v-model="item.startTimes[6]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
            <el-time-picker
              v-model="item.endTime[6]"
              style="width:100px;"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="请选择"
            ></el-time-picker>
          </div>
          <div style="display:flex; justify-content: center; align-items: center;width:100px;">
            <el-button size="mini" v-if="index>0" type="danger" @click="delRowData(index)">删除</el-button>
          </div>
        </div>
      </div>

      <el-button style="margin-top:10px" v-if="timeArry.length<8" @click="addRowData">添加</el-button>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { isEmail, isMobile } from "@/utils/validate";

import { treeDataTranslate } from "@/utils";
export default {
  data() {
    return {
      visible: false,
      postType: 1,
      roleList: [],
      menuList: [],
      timeArry: [
        {
          startTimes: [],
          endTime: []
        }
      ],
      menuListTreeProps: {
        children: "children",
        label: "lable",
        disabled: val => val.type == 1
      },
      dataForm: {},
      dataRule: {
        name: [{ required: true, message: " 名称不能为空", trigger: "blur" }],
        deviceNo: [
          { required: true, message: "设备号不能为空", trigger: "blur" }
        ],
        deviceIp: [
          { required: true, message: "设备ip端口号不能为空", trigger: "blur" }
        ],
        databaseIp: [
          { required: true, message: "数据库ip端口号不能为空", trigger: "blur" }
        ],
        username: [
          { required: true, message: "数据库用户名不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "数据库密码不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 菜单树选中
    menuListTreeCurrentChangeHandle(data, node) {
      if (data.type == 1) {
        return false;
      }
      this.dataForm.parentId = data.value;
      this.dataForm.parentName = data.lable;
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    delRowData(index) {
      this.timeArry.splice(index, 1);
    },
    addRowData() {
      this.timeArry.push({
        startTimes: [
          "00:00",
          "00:00",
          "00:00",
          "00:00",
          "00:00",
          "00:00",
          "00:00"
        ],
        endTime: ["23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59"]
      });
    },
    init(item, type) {
      this.timeArry = [
        {
          startTimes: [
            "00:00",
            "00:00",
            "00:00",
            "00:00",
            "00:00",
            "00:00",
            "00:00"
          ],
          endTime: [
            "23:59",
            "23:59",
            "23:59",
            "23:59",
            "23:59",
            "23:59",
            "23:59"
          ]
        }
      ];

      if (item) {
        this.dataForm = item;
        if (item.startTime.length > 1) {
          this.timeArry = [];
          let startTimes = item.startTime.split(";");
          let endTime = item.endTime.split(";");
          console.log(startTimes.length);
          for (let i = 0; i < startTimes.length; i++) {
            this.timeArry.push({
              startTimes: startTimes[i].split(","),
              endTime: endTime[i].split(",")
            });
          }
        }
      }

      this.visible = true;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          console.log(this.timeArry);
          this.dataForm.startTime = "";
          this.dataForm.endTime = "";
          for (let i = 0; i < this.timeArry.length; i++) {
            this.dataForm.startTime +=
              this.timeArry[i].startTimes.join(",") +
              (i < this.timeArry.length - 1 ? ";" : "");
            this.dataForm.endTime +=
              this.timeArry[i].endTime.join(",") +
              (i < this.timeArry.length - 1 ? ";" : "");
          }
          // this.dataForm.startTime = this.startTimes.join(",");
          // this.dataForm.endTime = this.endTime.join(",");
          let data = JSON.stringify(this.dataForm);

          this.$http({
            url: this.$http.adornUrl(`/sys/gate/saveOrUpdateGate`),
            method: "post",
            data: this.$http.adornData({ data: data })
          }).then(({ data }) => {
            if (data && data.code == 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
